<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <title>OnsenUI on HarmonyOS</title>
    
    <!-- OnsenUI CSS -->
    <link rel="stylesheet" href="cordova_harmonyos_onsui_modules/css/onsenui.css">
    <link rel="stylesheet" href="cordova_harmonyos_onsui_modules/css/onsen-css-components.css">
    <link rel="stylesheet" href="cordova_harmonyos_onsui_modules/css/custom-styles.css">
    
    <!-- OnsenUI JS -->
    <script src="cordova_harmonyos_onsui_modules/js/onsenui.js"></script>
    
    <!-- 性能优化脚本 -->
    <script src="cordova_harmonyos_onsui_modules/js/performance-optimizer.js"></script>
    
    <!-- Cordova JS (自动注入) -->
    <script src="cordova.js"></script>
    
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f5f7fa;
        }
        
        .welcome-section {
            padding: 40px 20px 30px;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 15s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .welcome-section h2 {
            color: white;
            margin: 0 0 15px 0;
            font-size: 28px;
            font-weight: 600;
            position: relative;
            z-index: 1;
        }
        
        .welcome-section p {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            margin: 8px 0;
            font-size: 15px;
            position: relative;
            z-index: 1;
        }
        
        .welcome-icon {
            font-size: 60px;
            margin-bottom: 20px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .example-list {
            background: transparent;
            margin: 0;
        }
        
        .example-list ons-list-header {
            background: transparent;
            color: #999;
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 16px 8px 16px;
        }
        
        .example-list ons-list-item {
            padding: 12px 16px;
            border-bottom: none;
            transition: all 0.2s;
            background: transparent;
            margin: 2px 8px;
            border-radius: 8px;
        }
        
        .example-list ons-list-item:hover {
            background-color: rgba(102, 126, 234, 0.08);
        }
        
        .example-list ons-list-item:active {
            background-color: rgba(102, 126, 234, 0.15);
            transform: scale(0.98);
        }
        
        .example-list .list-item__icon {
            font-size: 20px;
            color: #667eea;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-radius: 8px;
        }
        
        .example-list .center {
            font-size: 14px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .example-list .right ons-icon {
            color: #ccc;
            font-size: 16px;
        }
        
        .stats-section {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: white;
            margin-top: 10px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #999;
        }
    </style>
</head>

<body>
    <ons-navigator id="myNavigator" page="home.html"></ons-navigator>

    <template id="home.html">
        <ons-page>
            <ons-splitter id="mainSplitter">
                <!-- 左侧导航栏 - 固定显示 -->
                <ons-splitter-side id="menu" side="left" width="280px" mode="split" style="border-right: 1px solid #e0e0e0;">
                    <ons-page style="background: #fafafa;">
                        <!-- 侧边栏头部 -->
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px 20px; text-align: center; color: white;">
                            <div style="font-size: 48px; margin-bottom: 15px;">🎨</div>
                            <h3 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600;">HarmonyOS_OnsenUI</h3>
                            <p style="margin: 0; font-size: 13px; opacity: 0.9;">HarmonyOS PC</p>
                        </div>

                        <!-- 统计信息 -->
                        <div style="display: flex; justify-content: space-around; padding: 20px 10px; background: white; border-bottom: 1px solid #e0e0e0;">
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #667eea;">16</div>
                                <div style="font-size: 11px; color: #999; margin-top: 4px;">组件</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #50c878;">100%</div>
                                <div style="font-size: 11px; color: #999; margin-top: 4px;">原生</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #ff6b6b;">MD</div>
                                <div style="font-size: 11px; color: #999; margin-top: 4px;">设计</div>
                            </div>
                        </div>

                        <!-- 组件列表 -->
                        <ons-list class="example-list" style="margin: 0; background: transparent;">
                <ons-list-header>组件示例</ons-list-header>
                
                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/button.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-crop-square" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Button 按钮
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/list.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-view-list" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        List 列表
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/dialog.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-comment" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Dialog 对话框
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/input.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-edit" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Input 输入框
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/card.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-card" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Card 卡片
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/tabbar.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-view-module" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Tabbar 标签栏
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/carousel.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-view-carousel" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Carousel 轮播
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/fab.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-plus" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        FAB 浮动按钮
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/pullhook.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-refresh" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Pull Hook 下拉刷新
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/splitter.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-menu" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Splitter 侧边栏
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/popover.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-comment-more" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Popover 弹出框
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/progress.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-trending-up" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Progress 进度条
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/segment.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-tab" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Segment 分段控件
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/modal.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-hourglass" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Modal 模态框
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/icons.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-star" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Icons 图标库
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>

                <ons-list-item onclick="pushPage('cordova_harmonyos_onsui_modules/examples/navbar.html')" tappable>
                    <div class="left">
                        <ons-icon icon="md-navigation" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">
                        Navbar 导航栏
                    </div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>
                        </ons-list>
                    </ons-page>
                </ons-splitter-side>

                <!-- 右侧内容区域 -->
                <ons-splitter-content id="content">
                    <ons-navigator id="contentNavigator" page="welcome.html"></ons-navigator>
                </ons-splitter-content>
            </ons-splitter>
        </ons-page>
    </template>

    <!-- 欢迎页面 -->
    <template id="welcome.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">OnsenUI on HarmonyOS</div>
            </ons-toolbar>

            <div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 44px); background: #f5f7fa;">
                <div style="text-align: center; padding: 40px;">
                    <div style="font-size: 80px; margin-bottom: 30px;">🎨</div>
                    <h1 style="color: #2c3e50; margin: 0 0 20px 0; font-size: 32px;">欢迎使用 OnsenUI</h1>
                    <p style="color: #7f8c8d; font-size: 18px; line-height: 1.8; margin-bottom: 30px;">
                        精美的移动端 UI 组件库<br>
                        运行在鸿蒙 PC 端 · Cordova 混合开发
                    </p>
                    <div style="display: flex; gap: 20px; justify-content: center; margin-top: 40px;">
                        <div style="padding: 20px 30px; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                            <div style="font-size: 28px; font-weight: bold; color: #667eea;">16</div>
                            <div style="font-size: 14px; color: #999; margin-top: 8px;">组件数量</div>
                        </div>
                        <div style="padding: 20px 30px; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                            <div style="font-size: 28px; font-weight: bold; color: #50c878;">100%</div>
                            <div style="font-size: 14px; color: #999; margin-top: 8px;">原生体验</div>
                        </div>
                        <div style="padding: 20px 30px; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                            <div style="font-size: 28px; font-weight: bold; color: #ff6b6b;">Material</div>
                            <div style="font-size: 14px; color: #999; margin-top: 8px;">设计风格</div>
                        </div>
                    </div>
                    <p style="color: #bbb; font-size: 14px; margin-top: 50px;">
                        👈 从左侧菜单选择一个组件开始体验
                    </p>
                </div>
            </div>
        </ons-page>
    </template>

    <script>
        // 性能监控和优化脚本
        
        // 性能监控函数
        function initPerformanceMonitor() {
            let frameCount = 0;
            let lastTime = performance.now();
            
            // 监控帧率
            function measureFPS() {
                frameCount++;
                const currentTime = performance.now();
                
                if (currentTime - lastTime >= 1000) {
                    const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
                    console.log('当前FPS:', fps);
                    
                    // 如果FPS低于55，输出警告
                    if (fps < 55) {
                        console.warn('性能警告: FPS低于55，当前值:', fps);
                    }
                    
                    frameCount = 0;
                    lastTime = currentTime;
                }
                
                requestAnimationFrame(measureFPS);
            }
            
            requestAnimationFrame(measureFPS);
            
            // 监控页面加载性能
            const navigationStart = performance.timing.navigationStart;
            const loadComplete = performance.timing.loadEventEnd;
            const loadTime = loadComplete - navigationStart;
            
            console.log('页面加载时间:', loadTime + 'ms');
        }

        // 优化后的页面跳转函数 - 在右侧内容区域加载
        function pushPage(page) {
            const startTime = performance.now();
            
            var contentNavigator = document.getElementById('contentNavigator');
            
            // 监控页面切换性能
            contentNavigator.resetToPage(page).then(() => {
                const endTime = performance.now();
                const loadTime = endTime - startTime;
                
                console.log(`页面 ${page} 加载时间: ${loadTime.toFixed(2)}ms`);
                
                // 如果加载时间超过100ms，输出优化建议
                if (loadTime > 100) {
                    console.warn('页面加载较慢，建议优化:', {
                        page: page,
                        loadTime: loadTime,
                        suggestions: [
                            '减少页面中的DOM元素数量',
                            '优化CSS样式，避免复杂选择器',
                            '使用CSS3硬件加速',
                            '延迟加载非关键资源'
                        ]
                    });
                }
            });
        }

        // 监控列表项点击性能
        function itemClicked(itemName) {
            const startTime = performance.now();
            
            // 模拟处理逻辑
            ons.notification.toast(`点击了: ${itemName}`, {
                timeout: 2000,
                animation: 'ascend'
            });
            
            const endTime = performance.now();
            console.log(`列表项点击响应时间: ${(endTime - startTime).toFixed(2)}ms`);
        }

        // 优化OnsenUI按钮性能和交互体验
        function optimizeOnsenUIButtons() {
            const buttons = document.querySelectorAll('ons-button');
            
            buttons.forEach(button => {
                // 启用硬件加速
                button.style.transform = 'translateZ(0)';
                button.style.willChange = 'transform';
                button.style.touchAction = 'manipulation';
                
                // 添加优化的点击反馈
                addButtonFeedback(button);
                
                // 添加性能监控
                addButtonPerformanceMonitor(button);
            });
            
            console.log(`优化了 ${buttons.length} 个按钮组件`);
        }

        // 为按钮添加优化的视觉反馈
        function addButtonFeedback(button) {
            let isPressed = false;
            
            // 触摸开始
            button.addEventListener('touchstart', function(e) {
                if (isPressed) return;
                isPressed = true;
                
                // 添加按下效果
                this.style.transform = 'scale(0.98) translateZ(0)';
                this.style.transition = 'transform 0.1s cubic-bezier(0.4, 0, 0.2, 1)';
                
                // 创建涟漪效果
                createRippleEffect(this, e.touches[0]);
            });
            
            // 触摸结束
            button.addEventListener('touchend', function() {
                isPressed = false;
                
                // 恢复原始状态
                this.style.transform = 'scale(1) translateZ(0)';
                
                // 延迟移除过渡效果
                setTimeout(() => {
                    this.style.transition = '';
                }, 100);
            });
            
            // 鼠标事件（PC端支持）
            button.addEventListener('mousedown', function(e) {
                if (e.button === 0) { // 左键
                    this.style.transform = 'scale(0.98) translateZ(0)';
                    createRippleEffect(this, e);
                }
            });
            
            button.addEventListener('mouseup', function() {
                this.style.transform = 'scale(1) translateZ(0)';
            });
        }

        // 创建高性能涟漪效果
        function createRippleEffect(element, event) {
            const rect = element.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = (event.clientX || event.pageX) - rect.left - size / 2;
            const y = (event.clientY || event.pageY) - rect.top - size / 2;
            
            const ripple = document.createElement('div');
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.4);
                transform: scale(0);
                left: ${x}px;
                top: ${y}px;
                width: ${size}px;
                height: ${size}px;
                pointer-events: none;
                z-index: 1;
            `;
            
            // 确保按钮有相对定位
            if (getComputedStyle(element).position === 'static') {
                element.style.position = 'relative';
            }
            
            element.appendChild(ripple);
            
            // 使用requestAnimationFrame优化动画
            requestAnimationFrame(() => {
                ripple.style.transition = 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                ripple.style.transform = 'scale(1)';
                ripple.style.opacity = '0';
            });
            
            // 动画结束后清理
            setTimeout(() => {
                if (ripple.parentNode) {
                    ripple.parentNode.removeChild(ripple);
                }
            }, 600);
        }

        // 为按钮添加性能监控
        function addButtonPerformanceMonitor(button) {
            button.addEventListener('click', function() {
                const startTime = performance.now();
                
                // 监控按钮响应时间
                requestAnimationFrame(() => {
                    const endTime = performance.now();
                    const responseTime = endTime - startTime;
                    
                    if (responseTime > 16) { // 超过一帧时间
                        console.warn(`按钮响应较慢: ${responseTime.toFixed(2)}ms`, this);
                    }
                });
            });
        }

        // Cordova 设备就绪事件
        document.addEventListener('deviceready', function() {
            console.log('Cordova is ready!');
            console.log('OnsenUI version:', ons.version);
            
            // 初始化性能监控
            initPerformanceMonitor();
        }, false);

        // OnsenUI 初始化
        ons.ready(function() {
            console.log('OnsenUI is ready!');
            
            // 优化按钮组件
            optimizeOnsenUIButtons();
            
            // 初始化性能优化器
            if (typeof initPerformanceOptimizer === 'function') {
                initPerformanceOptimizer();
            }
            
            // 监听动态添加的按钮
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1) { // 元素节点
                            const newButtons = node.querySelectorAll ? 
                                node.querySelectorAll('ons-button') : [];
                            
                            if (node.tagName === 'ONS-BUTTON') {
                                optimizeOnsenUIButtons();
                            } else if (newButtons.length > 0) {
                                newButtons.forEach(button => {
                                    addButtonFeedback(button);
                                    addButtonPerformanceMonitor(button);
                                });
                            }
                        }
                    });
                });
            });
            
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
            
            // 延迟运行性能测试（可选）
            setTimeout(() => {
                if (typeof createPerformanceTestSuite === 'function') {
                    const performanceTest = createPerformanceTestSuite();
                    // performanceTest.runAllTests(); // 取消注释以启用自动性能测试
                }
            }, 2000);
        });
    </script>
</body>
</html>
